<template>
  <div class="container">
    <img
      src="../assets/write.png"
      class="m-auto"
      style="display: block; width: 400px; height: 400px"
    />
    <button
      class="btn btn-primary m-auto mb-5"
      style="display: block"
      @click="addArtical"
    >
      开始写文章
    </button>
    <column-list :list="list" />
    <button
      class="btn btn-outline-primary m-auto mb-5"
      style="display: block"
      @click.prevent="loadMore"
    >
      加载更多
    </button>
  </div>
</template>
<script lang='ts'>
import { computed, defineComponent, onMounted } from "vue";
import ColumnList from "../components/ColumnList.vue";
// import { ColumnProps } from "../utils/interface";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default defineComponent({
  name: "Home",
  components: { ColumnList },
  setup() {
    const router = useRouter();
    const addArtical = () => {
      router.push("/create");
    };
    const store = useStore();
    onMounted(() => {
      store.dispatch("fetchColumns");
    });
    const list = computed(() => store.getters.getColumns);
    let payload = {
      currentPage: 1,
      pageSize: 6,
    };
    const loadMore = () => {
      console.log("loadMore");
      payload.currentPage++;
      store.dispatch("fetchColumns", payload);
    };
    return {
      list,
      addArtical,
      loadMore,
    };
  },
});
</script>
<style scoped>
.image {
  display: flex;
  justify-content: center;
}
</style>